<div>
	<div class="panel panel-primary text-center">
		<div class="panel-heading">
			<span class="main-title"><span class="glyphicon glyphicon-cog"></span> {{'agreements' | translate}}</span>
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-body">
			<message-error-panel ng-model="message" auto-close="true"></message-error-panel>
			<div class="bot-10">
				<button type="button" class="btn btn-warning btn-sm" ng-click="add()">
					<span class="glyphicon glyphicon-plus-sign"></span>
				</button>
			</div>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>#</th>
						<th>{{'Agreement.code' | translate}}</th>
						<th>{{'Agreement.name' | translate}}</th>
						<th>{{'Agreement.type' | translate}}</th>
						<th>{{'Agreement.colectiva' | translate}}</th>
						<th>{{'Agreement.country' | translate}}</th>
						<th>{{'Agreement.deleted' | translate}}</th>
						<th>{{'options' | translate}}</th>
					</tr>
				</thead>
				<tbody>
					<tr class = "animate-pagination" ng-repeat="agreement in searchResults.results">
						<td>{{(searchResults.currentPage - 1) * searchResults.itemsPerPage + $index + 1}}</td>
						<td>{{agreement.code}}</td>
						<td>{{agreement.name}}</td>
						<td>{{(agreement.type != null ? 'AgreementType.' + agreement.type : '') | translate}}</td>
						<td>{{agreement.colectiva}}</td>
						<td><span class="f16"><span class = "flag {{agreement.country.iso2 | lowercase}}"></span></span></td>
						<td>{{agreement.deleted | date : 'dd/MM/yyyy'}}</td>
						<td class="vert-align">
							<button type="button" class="btn btn-warning btn-sm" ng-click="edit(agreement)">
								<span class="glyphicon glyphicon-edit"></span>
							</button>
							<button type="button" class="btn btn-warning btn-sm" ng-click="remove(agreement)">
								<span class="glyphicon glyphicon-trash"></span>
							</button>
						</td>
					</tr>
				</tbody>
			</table>
			<search-result-pagination></search-result-pagination>
		</div>
	</div>
</div>